<template>
	<view class="content container">
		<view class="header">
			<view @click="show = false; showDate = !showDate">{{showDateText}}<u-icon class="icon" :name="showDate ? 'arrow-up-fill' : 'arrow-down-fill'" :size="18"></u-icon></view>
			<view @click="show = !show; showDate = false; ">全部<u-icon class="icon" :name="show ? 'arrow-up-fill' : 'arrow-down-fill'" :size="18"></u-icon></view>
		</view>
		<view style="height: 0; position: relative;">
			<u-transition class="transition-down" :show="show" mode="slide-down">
						<view class="dropdown-menu">
							<view class="dropdown-menu-item" :class="[search.types === 0 ? 'dropdown-item-selected' : null]" @click="search.types = 0">全部</view>
							<view class="dropdown-menu-item" :class="[search.types === 4 ? 'dropdown-item-selected' : null]" @click="search.types = 4">提现</view>
							<view class="dropdown-menu-item" :class="[search.types === 3 ? 'dropdown-item-selected' : null]" @click="search.types = 3">充值</view>
							<view class="dropdown-menu-item" :class="[search.types === 2 ? 'dropdown-item-selected' : null]" @click="search.types = 2">收款</view>
							<view class="dropdown-menu-item" :class="[search.types === 1 ? 'dropdown-item-selected' : null]" @click="search.types = 1">消费</view>
						</view>
					 </u-transition>
					 <uni-transition mode="fade" :show="show">
						 <view @click="show = !show" style="position: relative; z-index: 5; height: 100vh; background: rgba(0,0,0,0.5);"></view>
					 </uni-transition>
					 <u-datetime-picker
						cancelText=""
						confirmText="完成"
						 :show="showDate"
						 v-model="search.date"
						 mode="year-month"
						 :formatter="formatterDate"
						 @confirm="confirmDate"
			></u-datetime-picker>
		</view>
	 <u-list
				class="list"
	 			@scrolltolower="loadMore"
	 		>
		 <u-list-item  v-for="(row, k) of moneyLogList" :key="k">
			<view class="list-item">
			 <view class="left-icon">
				 <image class="img" src="../../static/img/my/money_in.png" v-if="[2,3].includes(row.type)"></image>
				 <image class="img" src="../../static/img/my/money_out.png" v-else></image>
			 </view>
			 <view class="main-item">
				 <view class="title-box">
					 <view class="title">{{row.typeText}}</view>
					 <view class="date">{{row.createtime}}</view>
				 </view>
				 <view class="money" :class="[ [2, 3].includes(row.type)  ? 'add' : null]">
					 {{ ([2, 3].includes(row.type) ? '+' : '') + row.money}}
				 </view>
			 </view>
			 </view>
		 </u-list-item>
	 </u-list>
	</view>
</template>

<script>
const moment = require('moment')
export default {
	data() {
		return {
			show: false,
			showDate: false,
			search: {
				date: Number(new Date()),
				types: 0
			},
			moneyLogList: [],
			page: 1,
		}
	},
	created() {
		this.showDateText = moment().format('YYYY年MM月')
		this.loadData(this.page)
	},
	watch: {
		'search.types': {
			handler(newVal) {
				this.loadData(this.page = 1)
				this.show = false
			},
			deep: true
		}
	},
	methods: {
		loadData(page = 1) {
			
			this.$http.post('user/getMoneyLogList', {page, ...this.search}).then(res => {
				if (this.page > 1) {
					this.moneyLogList.push(...res.data.data.map(v => {
						let types = ['', '消费', '收款', '充值', '提现'];
						
						return {
							type: v.types,
							typeText: types[v.types],
							money: v.money,
							createtime: v.createtime
						}
					}))
				} else {
					this.moneyLogList =  res.data.data.map(v => {
						let types = ['', '消费', '收款', '充值', '提现'];
						
						return {
							type: v.types,
							typeText: types[v.types],
							money: v.money,
							createtime: v.createtime
						}
					})
				}
				
			})
		},
		loadMore() {
			this.loadData(++this.page)
		},
		formatterDate(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		confirmDate({value}) {
			this.search.date = value
			this.showDate = false
			this.showDateText = moment(value).format('YYYY年MM月')
			this.loadData(this.page = 1)
		}
	}
}
</script>

<style lang="scss" scoped>
.content.container {
	position: relative;
	z-index: 1;
	height: 100%;
	overflow: hidden;
	
	.transition-down {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100vw;
		
		.dropdown-menu {
			background: #fff;
			
			.dropdown-menu-item {
				margin: 24rpx 40rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				padding: 16rpx 40rpx;
				&.dropdown-item-selected {
					background: #f0f0f0;
				}
			}
		}
	}
	
	.header {
		display: flex;
		z-index: 100;
		background: #fff;
		position: relative;
		
		> view {
			position: relative;
			z-index: 50;
			flex: 1;
			display: flex;
			justify-content: center;
			border-bottom: solid 1px #f0f0f0;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #222;
			
			.icon {
				margin-left: 4rpx;
			}
		}
	}
	
	.list {
		
		.list-item {
			display: flex;
			
			.left-icon {
				margin: 40rpx 20rpx 40rpx 32rpx;
				height: 90rpx;
				box-sizing: border-box;
				/* margin-left: 40rpx;
				margin-right: 20rpx; */
				background: #f7f7f7;
				padding: 25rpx;
				border-radius: 100px;
				display: flex;
				align-items: center;
				.img {
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			.main-item {
				flex: 1;
				display: flex;
				border-bottom: solid 1px #f0f0f0;
				padding: 40rpx 0;
				align-items: center;
				
				.title-box {
					flex: 1;
					.title {
						font-size: 28rpx;
						margin: 8rpx 0 12rpx;
						line-height: 1;
					}
					
					.date {
						line-height: 1;
						color: #c9c9c9;
						font-size: 24rpx;
					}
				}
				
				.money {
					font-size: 36rpx;
					margin-right: 32rpx;
					color: #222;
					font-weight: 600;
					&.add {
						color: #086aef;
					}
					
				}
			}
		}
	}
	
}
</style>
